<template>
  <el-pagination
    :current-page="currentPage.value"
    :page-size="pageSize.value"
    :total="pagination['totalKey']"
    v-bind="paginationOptions"
    @size-change="handlePaginationSizeChange"
    @current-change="handlePaginationCurrentChange"
    @prev-click="handlePaginationPrevClick"
    @next-click="handlePaginationNextClick"
  >
    <template #default>
      <span class="el-pagination__total">{{ pageInfo }}</span>
    </template>
  </el-pagination>
</template>
<script setup>
import {  computed, reactive,watch } from "vue";
const emit = defineEmits(["pagination-change"]);
const props = defineProps({
  pagination: Object,
  paginationOptions: {
    type: Object,
    default: () => {
      return {
        pagerCount: 5,
        pageSizes: [2,10, 20, 50, 100],
        layout: "prev, pager, next, jumper,sizes, ->,slot",
      };
    },
  },
});
const pagination = reactive(props.pagination);
const paginationOptions = reactive(props.paginationOptions);
const pageInfo = computed(() => {
  let currentPage = pagination.page;
  let pageSize = pagination.limit;
  const total = pagination["totalKey"];
  if (total && total > 0) {
    const start = (currentPage - 1) * pageSize + 1;
    let end = currentPage * pageSize;
    if (total <= end) {
      end = total;
    }
    return `第${start}到第${end}条 共${total}条`;
  } else {
    return "";
  }
});
const pageSize = computed(() => {
  return pagination["limit"] || 20;
});
const currentPage = computed(() => {
  return pagination["page"] || 1;
});
/**
 * @description 每页条数改变
 */
const handlePaginationSizeChange = (pageSize) => {
  handlePaginationChange({
    currentPage: 1,
    pageSize: pageSize,
  });
};
/**
 * @description 当前页码改变
 */
const handlePaginationCurrentChange = (currentPage) => {
  handlePaginationChange({
    pageSize: pagination["limit"],
    currentPage: currentPage,
  });
};
/**
 * @description 上一页
 */
const handlePaginationPrevClick = (currentPage) => {
  handlePaginationChange({
    pageSize: pagination["limit"],
    currentPage: currentPage,
  });
};
/**
 * @description 下一页
 */
const handlePaginationNextClick = (currentPage) => {
  handlePaginationChange({
    pageSize: pagination["limit"],
    currentPage: currentPage,
  });
};
const handlePaginationChange = ({ pageSize, currentPage }) => {
  if (pageSize === pagination["limit"] && currentPage === pagination["page"]) {
    return;
  }
  //解决分页改变触发页码改变 使得该方法触发俩边
  emit("pagination-change", {
    limit: pageSize || pagination["limit"],
    page: currentPage || pagination["page"],
  });
};
</script>
<style lang="scss">
.el-pagination {
  height: 50px;
  border-top: 1px solid rgb(235, 238, 245);
}
</style>
